<template>
	<view class="page">
		<CustomNav :isBack="false" :topBgColor="topBgColor" title="我的"></CustomNav>
		<image src="https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/mine/mine_bg.png"
			class="bg-img" mode="widthFix"></image>
		<view class="user-info" :style="'margin-top:'+mt">
			<view class="user-photo-block" v-if="user.mobile">
				<button class="upload-photo-btn" open-type="chooseAvatar" @chooseavatar="changeAvatar"
					hover-class="none">
					<view class="tips">点击编辑</view>
					<image :src="cloudStorage+user.faceUrl" class="user-photo ps"></image>
				</button>
			</view>
			<image class="user-photo" v-else
				src="https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/mine/Mr.jpg"></image>
			<view class="user-name" v-if="user.mobile">{{user.mobile}}</view>
			<button class="user-name" hover-class="none" open-type="getPhoneNumber" v-else
				@getphonenumber="getPhoneNumber">立即登录</button>
		</view>
		<view class="menu-block">
			<!-- <view @click="navigate('/page_pack/payment/balance')" class="menu-item">
				<image class="menu-icon"
					src="https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/mine/yonghu.png">
				</image>
				<view class="menu-name">用户信息</view>
				<view class="iconfont icon-gengduo"></view>
			</view> -->
			<view @click="navigate('/page_pack/complaint/my_complaint')" class="menu-item">
				<image class="menu-icon"
					src="https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/mine/jianyi.png">
				</image>
				<view class="menu-name">我的投诉建议</view>
				<view class="iconfont icon-gengduo"></view>
			</view>
			<view v-if="user.mobile" class="menu-item" @click="logout">
				<image class="menu-icon"
					src="https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/mine/tuichu.png">
				</image>
				<view class="menu-name">退出登录</view>
				<view class="iconfont icon-gengduo"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStorage,
		removeStorage,
		setStorage
	} from '@/util/auth.js';
	import {
		savePhoneNumberByCode,
		getUserInfo,
		saveUserInfo
	} from '@/api/user.js';
	import {
		uploadFile
	} from '@/api/file.js';
	export default {
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				user: {}
			}
		},
		methods: {
			getPhoneNumber(e) {
				console.log(e)
				if (!e.detail.code) {
					this.showToast('您取消了授权');
					return;
				}
				const mobileCode = e.detail.code;
				wx.login({
					success: (login) => {
						uni.showLoading({
							title: '登录中',
							mask: true
						})
						const code = login.code;
						savePhoneNumberByCode({
							mobileCode: mobileCode,
							code: code,
						}).then((res) => {
							if (res.message) {
								this.showToast(res.message);
							} else {
								setStorage('token', res.token, 259200);
								setStorage('user', res.user, 259200);
								// this.showToast('登录成功', () => {
								// 	uni.switchTab({
								// 		url: '/pages/index/index'
								// 	});
								// }, 1000);
								this.showToast('登录成功！')
								this.user = res.user
								this.getUser();
							}
						});
					}
				});
			},
			getUser() {
				getUserInfo().then((res) => {
					this.user = res
				});
			},
			changeAvatar(e) {
				uploadFile(e.detail.avatarUrl).then((res) => {
					uni.showLoading({
						title: '保存中',
						mask: true
					});
					saveUserInfo({
						faceUrl: res
					}).then(() => {
						this.showToast('保存成功');
						this.getUser();
					});
				});
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: `确定要退出登录吗？`,
					confirmColor: '#3255B8',
					success: (res) => {
						if (res.confirm) {
							// logoutApi().then(() => {
							removeStorage('token');
							removeStorage('user');
							this.user = {}
							uni.switchTab({
								url: '/pages/index/index'
							})
							// })
						}
					}
				})
			}
		},
		onShow() {
			const user = getStorage(user);
			if (user) {
				this.user = user
			}

			if (getStorage('token')) {
				this.getUser();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		overflow: hidden;
		height: 100%;

		.bg-img {
			width: 100%;
			height: 100%;
			position: absolute;
		}

		.user-info {
			width: $content-width;
			margin: 0 auto;
			padding-top: 60rpx;
			display: flex;
			align-items: center;
			position: relative;
			color: #fff;

			.user-photo-block {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				overflow: hidden;

				.upload-photo-btn {
					width: 100%;
					height: 100%;
					position: relative;
					padding: 0;

					.tips {
						font-size: 20rpx;
						width: 100%;
						position: absolute;
						bottom: 0;
						left: 0;
						color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						background: rgba(0, 0, 0, 0.5);
						z-index: 1;
						height: 48rpx;
					}
				}

				.user-photo {
					width: 100%;
					height: 100%;
				}

				.user-photo.ps {
					position: absolute;
					left: 0;
					top: 0;

				}
			}

			.user-photo {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				margin-right: 40rpx;
			}

			.user-name {
				font-size: 32rpx;
				font-weight: bold;
				background: none;
				margin: 0;
				border-radius: 0;
				line-height: normal;
				padding: 0;
				color: #fff;
				margin-left: 20rpx;

				&::after {
					border: none;
				}
			}
		}

		.menu-block {
			width: $content-width;
			margin: 0 auto;
			margin-top: 50rpx;
			position: relative;

			.menu-item {
				width: 100%;
				background: #fff;
				border-radius: 8px;
				height: 150rpx;
				display: flex;
				align-items: center;
				padding: 30rpx;
				margin-bottom: 20rpx;

				.menu-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				.menu-name {
					flex-grow: 1;
					font-size: 30rpx;
				}

				.iconfont {
					color: #767676;
				}
			}
		}
	}
</style>